<template>
  <div>
    <div class="card mb-3" v-if="isAddEdit">
      <div class="card-body">
        <div class="d-flex">
          <div class="font-weight-bold" style="width: 120px">类型选择：</div>
          <c-radio-group
            v-model="riskType"
            :options="enumRiskType"
            number-key
            class="mt-1"
            @change="handleTypeChange"
          ></c-radio-group>
        </div>
      </div>
    </div>

    <div v-show="riskType === 1">
      <renewal-info
        :renewal-data="renewalData"
        :view-mode="viewMode"
        :risk-type="1"
        @change="handleCustomerSelect"
      ></renewal-info>
    </div>
    <div v-show="riskType === 2">
      <renewal-info
        :renewal-data="renewalData"
        :view-mode="viewMode"
        :risk-type="2"
        @change="handleCustomerSelect"
      ></renewal-info>
    </div>

    <postpone-edit
      v-show="riskType === 1"
      :related-data="related"
      :renewal-data="renewalData"
      :view-mode="viewMode"
      @dissmiss="beforeClose()"
      @success="handleSuccess"
    ></postpone-edit>

    <renewal-edit
      v-show="riskType === 2"
      :related-data="related"
      :renewal-data="renewalData"
      :view-mode="viewMode"
      @dissmiss="beforeClose()"
      @success="handleRenewalSuccess"
    ></renewal-edit>
  </div>
</template>

<script>
import { enumRiskType } from '@/credit/views/city/risk/riskMixins'

import PostponeEdit from '@/credit/views/city/risk/PostponeEdit'
import RenewalEdit from '@/credit/views/city/risk/RenewalEdit'
import RenewalInfo from '@/credit/views/city/risk/RenewalInfo'

export default {
  components: {
    PostponeEdit,
    RenewalEdit,
    RenewalInfo,
  },
  props: {
    visible: Boolean,
    renewalData: {
      type: Object,
      default: () => ({}),
    },
    viewMode: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      enumRiskType,
      riskType: 1,
      relatedId: '',
      related: {},
    }
  },
  computed: {
    isAddEdit() {
      return !this.renewalData.credit_extended_loan_id
    },
    editType() {
      return +this.renewalData.extended_loan_type || 1
    },
  },
  watch: {
    renewalData: {
      handler: function () {
        if (!this.isAddEdit) {
          this.riskType = this.editType
          this.getCustomerRelated()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.riskType = 1
      this.relatedId = ''
    },
    handleTypeChange() {
      this.related = {}
    },
    handleCustomerSelect(val, related) {
      this.related = related || {}
    },
    handleSuccess(res) {
      this.$emit('success', res)
      this.beforeClose()
    },
    handleRenewalSuccess(res) {
      this.$emit('success', res)
      if (!res || res.close !== false) {
        this.beforeClose()
      }
    },
    getCustomerRelated() {
      const id = this.renewalData.customer_related_id
      if (!id) return
      this.$api
        .getData(
          'credit',
          'customer_related',
          {
            index: 1,
            size: 1,
            customer_related_id: id,
          },
          this.order
        )
        .then(res => {
          const list = (res && res.data && res.data.data) || []
          this.related = list[0] || {}
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.r-form-label {
  width: 110px;
  text-align: right;
  margin-right: 0.5rem;
}
</style>
